<template>
	<view class="page" :style="{ backgroundImage: `url(${static}head-index.png)`}">
		<view class="content">
			<view class="inner">
				<view class="tab">
					<view class="tab-item" @tap="jies(1)">
						<image src="../../static/img/shu.png" mode="" class="img"></image>	
						<view class="name">书展介绍</view>
					</view>
					<view class="tab-item" @tap="jies(2)">
						<image src="../../static/img/xiang.png" mode="" class="img"></image>	
						<view class="name">展区设计</view>
					</view>
					<view class="tab-item" >
						   <!-- <button open-type="getPhoneNumber" v-if="!login" class="loginbtn" @getphonenumber="getPhoneNumber"></button> -->
							<image src="../../static/img/chang.png" mode="" @tap='golist' class="img"></image>
							<view class="name">活动预约</view>
					</view>
					<view class="tab-item" @tap="goPosition">
						<image src="../../static/img/jiang.png" mode="" class="img"></image>	
						<view class="name">展会位置</view>
					</view>
				</view>	
				<view class="quan">
					<view class="title">书展专项优惠券</view>
					<view class="cont">
						<view class="inner">
							<view class="border">
								<view class="btn" @tap="goQuan">
									立即领取
								</view>
								<view class="name">
									武汉书展惠民购书券
								</view>
								<view class="n-name">
									数量有限，先到先得
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="h-title">
					会展资料
				</view>
				<view class="blocks">
					<view class="block block1" @tap="goBook">
						<view class="title">电子会刊</view>
						<view class="btn">
							立即查看
						</view>
					</view>
					<view class="block block2" @tap="goPlan">
						<view class="title">倍阅读红色共读</view>
						<view class="btn">
							立即查看
						</view>
					</view>
				</view>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import BASE_URL from '@/util/path.js';
	export default {
		data() {
			return {
				login:false,
				static:BASE_URL.occStatic
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return {
				title: '“书香长江”阅读周活动预约',
				path: '/pages/index/index',
				imageUrl: ''
			}
		},
		
		onShareTimeline(){
			return {
				title: '“书香长江”阅读周活动预约',
				path: '/pages/index/index', // 分享默认跳转到页面地址
				success: () => {
					uni.showToast({
						title: '分享成功',
						duration: 3000,
					});
				},
				fail: () => {
					uni.showToast({
						title: '分享失败',
						icon: 'none',
						duration: 3000,
					});
				},
			};
		},
		onLoad() {
     //       const token = uni.getStorageSync('access_token');
		   // console.log(token);
		   // if(token) {
			  //  this.login = true
		   // }
		},
		onPageScroll(obj) {
			if (Number(obj.scrollTop) > 0) {
				this.isFlex = true;
			} else {
				this.isFlex = false;
			}
		},
		onPageScroll(obj) {
			if (Number(obj.scrollTop) > 0) {
				this.isFlex = true;
			} else {
				this.isFlex = false;
			}
		},
		methods: {
			getPhoneNumber(e) {
				const _this = this
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log(e);
					const {
						code,
						encryptedData,
						iv
					} = e.detail;
					uni.login({
						provider: 'weixin',
						success: function  (res) {
						// 登录成功，获取到用户信息
						// console.log(res.errMsg)
						
						   _this.local_login({
							   code,
							   encryptedData,
							   iv,
							   code:res.code
						   })
							
						// TODO: 根据实际需求进行后续操作，如获取用户信息、跳转到其他页面等。
					}
				})
			 }
			},
			local_login(obj) {
				uni.showLoading({
					icon:'none'
				})
				const  _this = this;
				uni.request({
					url: BASE_URL.wy + 'api/auth/wx_verify',
					header: {
						'Content-Type': 'application/json'
					},
					method: 'post',
					data:{code:obj.code},
					success: (res) => {
						uni.hideLoading();
						// console.log(res);
						const {
							status,
							data,
							msg
						} = res.data;
						
						if (status == 200) {
							const post_data = {
								...obj,
								...res.data.data,
								nickname:''
							}
							_this.weixinLogin(post_data)
							// console.log(post_data);
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: msg
							})
							return
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
				// const res = await this.$http({
				// 	url:'api/auth/wx_verify',
				// 	method:"post",
					
				// })
				// console.log(res);
				
				
				// const res2 = await this.$http({
				// 	url:'api/auth/login_wx',
				// 	method:"post",
				// 	data:post_data
				// })
				
				
				//console.log(res2.data);
				// uni.setStorage({
					
				// })
				// uni.navigateTo({
				// 	url:'/pages/list/list'
				// })
			},
			golist() {
			  uni.navigateTo({
			  	url:'/pages/list/list'
			  })
			},
			weixinLogin (obj) {
				uni.showLoading({
					icon:'none'
				})
				uni.request({
					url: BASE_URL.wy + 'api/auth/login_wx',
					header: {
						'Content-Type': 'application/json'
					},
					method: 'post',
					data:obj,
					success: (res) => {
						uni.hideLoading();
						// console.log(res);
						const {
							status,
							data,
							msg
						} = res.data;
						
						if (status == 200) {
							console.log('data',data);
							uni.setStorageSync('access_token',data.access_token);
							uni.navigateTo({
								url:'/pages/list/list'
							})
							// _this.weixinLogin(post_data)
							// console.log(post_data);
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: msg
							})
							return
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			 jies(num) {
				 // uni.showToast({
				 // 	title:'稍后开放，敬请期待',
					// icon:'none'
				 // })
				 uni.navigateTo({
				 	url:'/pages/zhanq/zhanq?type=' + num
				 })
			 },
			 bookjies() {
				 uni.showToast({
				 	title:'稍后开放，敬请期待',
				    icon:'none'
				 })
			 },
			 goQuan() {
				 // uni.showToast({
				 // 	title:'稍后开放，敬请期待',
				 // 	icon:'none'
				 // })
				 wx.navigateToMiniProgram({
				     appId: 'wx647fbc272d20c1e2',
				     path: '/bundle/pages/get_coupon/get_coupon',//要打开B小程序的页面
				     extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
				     envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产release 
				     success(res) {
				         console.log('打开成功',res)
				     }
				 }) 
			 },
			 goPosition() {
				 // uni.showToast({
				 // 	title:'稍后开放，敬请期待',
				 // 	icon:'none'
				 // })
				 
				 uni.navigateTo({
				 	url:'/pages/map/map'
				 })
			 },
			 goBook() {
				 uni.navigateTo({
				 	url:'/pages/showList/showList'
				 })
				 // uni.showToast({
				 // 	title:'稍后开放，敬请期待',
				 //    icon:'none'
				 // })
			 },
			 goPlan() {
				 wx.navigateToMiniProgram({
				     appId: 'wxde50cb3191501f3a',
				     path: '/pages/index/index',//要打开B小程序的页面
				     extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
				     envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产release 
				     success(res) {
				         console.log('打开成功',res)
				     }
				 }) 
				 // uni.showToast({
				 // 	title:'稍后开放，敬请期待',
				 //    icon:'none'
				 // })
			 }
		}
	}
</script>

<style lang='scss'>
	@function px($col) {
	  @return $col / 1.44 + rpx;
	}
     
	.page {
		width: 100%;
		min-height: 100%;
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-top: 582rpx;
		padding-bottom: 160rpx;
		background-color: #f6f6f6;
		.back {
			left: 38rpx;
			top: 87rpx;
			position: fixed;
			width: 58rpx;
			height: 58rpx;
			z-index: 9999;
		}
	}
	
	.content {
		width: 100%;
		justify-content: space-between;
		padding:0 px(35);
		.inner {
			/* background-color: #fff; */
			position: relative;
			border-radius: 32rpx;
			overflow: hidden;
			padding:px(73) px(37);
			
		}
	}
	
	.tab {
		display: flex;
		justify-content: space-between;
		padding:0 px(37);
		margin-bottom: px(46);
		.tab-item {
			position: relative;
			.loginbtn {
				position: absolute;
				margin: 0;
				padding: 0;
				border: 1px solid #f6f6f6;;
				background: none;
				width: 107rpx;
				height: 107rpx;
				display: block;
				opacity: 0;
				/* background-color: red; */
			}
		}
		.img {
			width: 107rpx;
			height: 107rpx;
			
		} 
		.name {
			font-size: 26rpx;
			width: 107rpx;
			text-align: center;
			color:#474747;
		}
	}
	
	.h-title {
		font-weight: bold;
		height: 68rpx;
		background-repeat: no-repeat;
		background-size: auto 38rpx; 
		background-position: bottom left; 
		background-image: url('../../static/img/title-bottom.png');
		margin-bottom: 25rpx;
		position: relative;
		left:30rpx;
	}
	
    .quan {
		width: 100%;
		padding: px(22) px(36) px(24) px(36);
		background-image: linear-gradient(to right, #f26d69, #f34a48);
		border-radius: 32rpx;
		margin-bottom: px(55);
		.title {
			color:#fff;
			font-weight: bold;
			margin: 30rpx;
			
		}
		.cont {
			width: 100%;
			.inner {
				background-color: #fee6c7;
				padding: 22rpx;
				.border{
					border:1px dashed #f57c76;
					border-radius: 	32rpx;
					padding: 40rpx 27rpx;
					position: relative;
					.btn {
						position: absolute;
						right: 25rpx;
						top:59rpx;
						color:#fff;
						background-color: #f25d4f;
						height: 72rpx;
						width: 168rpx;
						border-radius: 36rpx;
						@include center();
					}
					.name {
						font-weight: bold;
						color:#6f4019;
						margin-bottom: 20rpx;
						font-size: 36rpx;
					}
					.n-name {
						font-size: 28rpx;
						color:#6f4019;
					}
				}
			}
		}
	}
	
	
	
	.blocks {
		display: flex;
		justify-content: space-between;
		.title {
			font-weight: bold;
		}
		.n-title {
			font-weight: bold;
		}
		.block {
			width: 315rpx;
			height: 210rpx;
			background-size: contain;
			background-repeat: no-repeat;
			position: relative;
			padding-top: px(45);
			padding-left: px(45);
			color:#fff;
			.btn {
				position: absolute;
				width: px(218);
				height: px(82);
				background-color: #f6f6f6;
				border-radius: 36rpx;
				right: px(34);
				bottom: px(40);
				@include center();
				font-size: px(36);
				font-weight: bold;
			}
		}
		.block1 {
			background-image: url('../../static/img/block0.png');
			.btn {
				color:#67998c;
				
			}
			
		}
		.block2 {
			background-image: url('../../static/img/block.png');
			.btn {
				color:#2faec2;
			}
		}
	}
</style>
